<template>
  <!-- 单个商品卡片 -->
  <li @click="goDetail(good.id)" class="good-card" >
    <div class="imageBox" >
      <img :src="good.s_goods_photos[0].path" alt="">
    </div>
    <h1>{{ good.name }}</h1>
    
    <h2>描述:{{ good.desc }}</h2>
    <p>价格:{{ good.price.toFixed(2) }}</p>
    <div class="btns">
      <button @click="goDetail(good.id)" class="btn01">查看详情</button>
      <button @click="addCart()">加入购物车</button>
    </div>

  </li>
</template>

<script>
export default {
  name: "GoodCard",
  props: ["good"],
  mounted() {
    // console.log(this.$props.good);
  },
  methods: {
    //跳转到详情页
    goDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
    //添加购物车
    addCart() { },
  },
};
</script>

<style lang="scss" scoped>
@charset 'utf-8';
@import '../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}

li {
  width: get(340);

  >.imageBox {
    width: get(340);
    height: get(240);
    margin-top: get(40);

    >img {}
  }

  >h1 {
    margin-top: get(20);
  }

  >h2 {
    font-weight: 500;
    opacity: .6;
    font-size: get(14);
  }

  >p {
    margin-top: get(18);
  }

  >.btns{
    button{
      margin-top: get(4);
      margin-right: get(10);
      border: 1px solid $color;
      border-radius: get(6);
      background-color: $color;
      color: #fff;
      margin-bottom: get(30);
    }
   
  }

  &:hover {
    background-color: $color1;
    box-shadow: 1px 1px 4px 1px rgb(195, 190, 190);

  }
}
</style>
